<template>
	<el-descriptions :title="title" :column="1" border>
		<template #extra><slot name="button"></slot></template>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<Cloudy />
					</el-icon>
					API
				</div>
			</template>
			{{ api }}
		</el-descriptions-item>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<DataAnalysis />
					</el-icon>
					作品
				</div>
			</template>
			{{ info.count }} 部
		</el-descriptions-item>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<VideoPlay />
					</el-icon>
					专辑
				</div>
			</template>
			{{ info.albumCount }} 部
		</el-descriptions-item>

		<el-descriptions-item
			align="center"
			class-name="content-style"
			label-class-name="label-style"
		>
			<template #label>
				<div class="cell-item">
					<el-icon class="icon-style">
						<User />
					</el-icon>
					艺术家
				</div>
			</template>
			{{ info.artistCount }} 位
		</el-descriptions-item>
	</el-descriptions>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { User, Cloudy, DataAnalysis, VideoPlay } from "@element-plus/icons-vue";

defineProps({
	title: {
		type: String,
		default: "",
	},
	api: {
		type: String,
		default: "",
	},
	info: {
		default: () => ({
			count: 0,
			itemCount: 0,
			albumCount: 0,
			artistCount: 0,
		}),
	},
});
</script>
